<template>
  <CommonPanel title="告警事件趋势">
    <template #opt>
      <div>
        <CustomBtn
          v-for="(i, v) in btnList"
          :key="v"
          @click="customActive(v)"
          :active="v === index ? true : false"
        >
          {{ i.name }}</CustomBtn
        >
      </div>
    </template>
    <div class="content-box1">
      <CommonChart :option="option" />
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from "echarts";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { getEvent } from "@/api/security-board";
let timer;

onMounted(() => {
  getDataList();
  timer = setInterval(getDataList, 10000);
});
onUnmounted(() => {
  clearInterval(timer);
});
const data = ref([]);
const dataName = ref([]);
function getDataList() {
  getEvent({ type: index.value + 2 + "" }).then((res) => {
    if (res.code === 1) {
      data.value = res.data.lists.map((i) => {
        return i.count_number;
      });
      dataName.value = res.data.lists.map((i) => {
        return i.times.split(" ")[1];
      });
      console.log(data, dataName);
    }
  });
}
const btnList = ref([
  {
    name: "近一周",
  },
  {
    name: "近一月",
  },
]);
const index = ref(0);
function customActive(v) {
  clearInterval(timer);
  index.value = v;
  getDataList();
  timer = setInterval(getDataList, 10000);
}

const option = computed(() => {
  return {
    grid: {
      left: "5%",
      right: "10%",
      top: "20%",
      bottom: "15%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "rgba(50, 216, 205, 1)",
        },
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: 1,
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#A1A7B3",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },

        data: dataName.value,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        padding: 5,
        // max: 1000,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#A1A7B3",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          margin: 10,
          textStyle: {
            color: "#A1A7B3",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "今日",
        type: "line",
        smooth: true,
        stack: "总量",
        symbolSize: 5,
        showSymbol: false,
        itemStyle: {
          normal: {
            color: "#23D0C4",
            lineStyle: {
              color: "#23D0C4",
              width: 2,
            },
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(50, 216, 205, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(255, 255, 255, 0.2)",
                },
              ],
              false
            ),
          },
        },
        data: data.value,
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;

  & > div {
    flex: 1;
    width: 0px;
  }

  .legend-box {
    margin: auto 0px;
    padding-left: 32px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

::v-deep {
  .content-box {
    width: 50% !important;
  }
}
</style>
